<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的收藏</title>
    <style>
        body {
            font-family: "Microsoft YaHei", sans-serif;
            background: #f8f9fa;
            margin: 0;
            padding: 20px;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
        }
        h2 {
            text-align: center;
            color: #333;
            margin: 20px 0;
        }
        .collection-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 20px;
        }
        .collection-card {
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 6px rgba(0,0,0,0.1);
            padding: 15px;
        }
        .collection-card h3 {
            color: #333;
            margin-bottom: 10px;
        }
        .collection-card p {
            margin: 5px 0;
            color: #666;
        }
        .price {
            font-weight: bold;
            color: #dc3545;
        }
        .actions {
            margin-top: 15px;
            display: flex;
            gap: 10px;
        }
        .actions button {
            flex: 1;
            padding: 8px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        .remove {
            background: #dc3545;
            color: white;
        }
        .view {
            background: #007bff;
            color: white;
        }
        .message {
            text-align: center;
            margin: 50px 0;
            color: #666;
        }
        .back-link {
            display: block;
            text-align: center;
            margin-top: 30px;
            color: #007bff;
            text-decoration: none;
        }
        .back-link:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <div class="container">
        <h2>我的收藏</h2>
        <div id="collectionList" class="collection-grid"></div>
        <div id="message" class="message"></div>
        <a href="index.html" class="back-link">返回首页</a>
    </div>
    <script>
        window.onload = () => {
            const user = checkLogin();
            if (user) {
                loadCollections(user.user_id);
            }
        };

        function loadCollections(userId) {
            fetch(`/collection/user/${userId}`)
            .then(res => res.json())
            .then(data => {
                const listEl = document.getElementById('collectionList');
                const msgEl = document.getElementById('message');
                
                if (data.success && data.collections.length) {
                    listEl.innerHTML = data.collections.map(item => `
                        <div class="collection-card">
                            <h3>${item.title}</h3>
                            <p>创作者：${item.creator || '未知'}</p>
                            <p class="price">价格：¥${item.price}</p>
                            <p>收藏时间：${item.collect_time}</p>
                            <div class="actions">
                                <button class="remove" onclick="removeCollection(${item.artwork_id})">取消收藏</button>
                                <button class="view" onclick="viewArtwork(${item.artwork_id})">查看详情</button>
                            </div>
                        </div>
                    `).join('');
                    msgEl.textContent = '';
                } else {
                    listEl.innerHTML = '';
                    msgEl.textContent = '暂无收藏的艺术品';
                }
            })
            .catch(err => {
                document.getElementById('message').textContent = '加载失败：' + err;
            });
        }

        function removeCollection(artworkId) {
            const user = checkLogin();
            if (!user) return;

            if (confirm('确定要取消收藏这件艺术品吗？')) {
                fetch('/collection/remove', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ user_id: user.user_id, artwork_id: artworkId })
                })
                .then(res => res.json())
                .then(data => {
                    alert(data.message);
                    if (data.success) {
                        loadCollections(user.user_id); // 重新加载收藏列表
                    }
                })
                .catch(err => alert('操作失败：' + err));
            }
        }

        function viewArtwork(artworkId) {
            location.href = `artwork_detail.html?id=${artworkId}`;
        }

        function checkLogin() {
            const userStr = localStorage.getItem('userInfo');
            if (!userStr) {
                alert('请先登录');
                location.href = 'login.html';
                return null;
            }
            return JSON.parse(userStr);
        }
    </script>
</body>
</html>
